<template>
	<view class="restaurant-available-dishes-container">
		<common-title :title="titleContent" @clickLeft="backToUpPage" @clickRight="savePage"></common-title>
		<restaurant-dishes-manage @changeStatus="changeStatus" :onSale="true" :restaurantDishes="availableDishes" v-if="availableDishes"
							@clickEdit="clickEdit"
		></restaurant-dishes-manage>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { apiGetRestaurantDishesByStatus, apiPutRestaurantDishesStatus } from '@/utils/apiRestaurant.js';
	import { onBeforeRouteLeave } from 'vue-router';
	import commonTitleVue from '@/components/common-title/common-title.vue';
	import restaurantManageVue from '@/components/restaurant-dishes-manage/restaurant-dishes-manage.vue';
	
	//标题内容
	const titleContent = ref({
		left:'返回',
		midst:'餐厅-已上架菜品',
		right:'保存'
	});
	
	//获取已上架的菜品
	const availableDishes = ref([]);
	
	
	const getAvailableDishes = async () => {
		try {
			let res = await apiGetRestaurantDishesByStatus(1);
			if (Array.isArray(res) && res.length > 0){
				availableDishes.value = res;
			}else{
				availableDishes.value = [];
			}
		}catch (err){
			console.error('获取餐厅菜品失败:', err); // 错误处理
		}
	};
	getAvailableDishes();
	
	
	//是否修改数据（是否上下架）
	const isEdit = ref(false);
	
	//保存
	const savePage = async () => {
		
		try{
			// 检查数组的长度并决定是否调用 API
			if (changedStatusDishes.value.length > 0) {
				isEdit.value = false;
				let res = await apiPutRestaurantDishesStatus(changedStatusDishes.value);
				if (res === '200') {
					//置空被改变的菜品，重新查一次菜品。
					changedStatusDishes.value = [];
					getAvailableDishes();
					uni.removeStorage({
						key: 'cartDishData'
					});
					uni.showToast({
						title:'保存成功',
						icon:'success'
					});
				}
				else {
					uni.showToast({
						title:'保存失败',
						icon:'error'
					});
				}
				
			}
			else {
				uni.showToast({
					title:'没有数据被修改',
					icon:'none'
				});
			}
		}catch(e){
			
		}
		 
	};
	
	//返回
	const backToUpPage = () => {
		uni.switchTab({
			url:'/pages/manage/manage'
		});
	};
	
	// 定义 changedStatusDishes，初始为空数组
	let changedStatusDishes = ref([]);
	
	// 改变上下架，status: 上下架，data: 菜品id
	const changeStatus = (status, data) => {
		isEdit.value = ! isEdit.value;
		if (status === '0') {
			// 如果状态是 0，就将数据推入 changedStatusDishes
			changedStatusDishes.value.push({
				id: data,
				status: status
			});
		} else if (status === '1') {
			// 如果状态是 1，就从 changedStatusDishes 中删除匹配的 id
			changedStatusDishes.value = changedStatusDishes.value.filter(dish => dish.id !== data);
		}
	};
	
	
	
	
	
	
	// 如果修改数据但未提交，提醒用户提交
	onBeforeRouteLeave((to, from, next) => {
	    // 检查 isEdit 的实际值
	    if (changedStatusDishes.value.length > 0) {
	        // 如果有未保存的修改，显示提示框
	        uni.showModal({
	            title: '提示',
	            content: '是否保存修改？',
	            success: async function (res) {
	                if (res.confirm) {

	                    // TODO: 提交修改的逻辑
	                    // 假设有一个函数 submitChanges() 用于提交修改
	                    await savePage();
	
	                    // 提交完成后允许导航
	                    next();
	                } else {

	
	                    // TODO: 删除缓存或执行其他逻辑（根据需要）
	                    
	                    // 直接允许导航
	                    next();
	                }
	            }
	            // 在这里不调用 next()，因为需要根据用户的操作来决定
	        });
	    } else {
	        // 如果没有修改，直接允许导航
	        next();
	    }
	});
	
	const clickEdit = (id) => {
		uni.navigateTo({
			url:'/pages/manage/restaurant_manage/restaurant-edit-dish?from=available&id='+id
		})
	}
	
</script>

<style lang="scss" scoped>
	.restaurant-available-dishes-container{

	}
</style>